<template>
        <view>
        	<u-tabbar
        		:value="tabValue"
        		@change="itemChange"
        		:fixed="true"
        		:safeAreaInsetBottom="false"
        		:placeholder="false"
				zIndex="1000"
        	>
        		<u-tabbar-item text="闲置" icon="home" dot></u-tabbar-item>
				<view class="tabars">
					<view class="item" @click="itemChange('p')">
						<image class="img" src="../../static/deal_logo.png" mode="scaleToFill"></image>
					</view>
				</view>
        		<u-tabbar-item text="消息" icon="chat" badge="0"></u-tabbar-item>
        	</u-tabbar>
        </view>
</template>

<script>
    export default {
		// 声明组件名
		name:"my-tabbar",
        data() {
            return {
                tabValue: 0,
            }
        },
		created(){},
		mounted(){},
        methods: {
            itemChange(e){
				if(e != 'p') this.tabValue = e
                this.$emit('itemClick', e)
            },

        }
    }
</script>

<style lang="scss">
 .tabars{
     width: 100rpx;
     height: 60rpx;
     display: flex;
     flex-direction: column;
     align-content: center;
     position: relative;
     bottom: 50rpx;
     border-radius: 50%;
     background-color: #fff;
     border-top: 2px solid #dadbde;
     padding: 20rpx 6rpx;
     .item{
         width: 100%;
         height: 100%;
         display: flex;
         justify-content: center;
         .img{
             width: 174rpx;
			 height: 110rpx;
			 border-radius: 60rpx;
			 position: relative;
			 top: -12rpx;
         }
     }
 }
</style>